import {createApp} from 'vue'
import '@/style/index.scss'
// 颜色选择器
import V3ColorPicker from 'v3-color-picker';
import 'animate.css' // 动画库
// 集成icons, Tailwind，Bootstrap
import 'uno.css'
import {createPinia} from 'pinia'
import router from './router/index.js'
import App from './App.vue'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import 'vant/es/toast/style';
import Loading from '@/components/Loading/index.vue'
import lazyPlugin from 'vue3-lazy'
import './permission.js'
// 收藏歌曲
import AddPlaylist from '@/components/AddPlaylist/index.vue'
// 分享弹窗
import SharePopup from '@/components/SharePopup/index.vue'

import lazyLoading from './assets/img/lazyLoading.png'
import lazyError from './assets/img/lazyError.jpg'
import {antiShake} from "./utils/index.js";

let app = createApp(App)

const store = createPinia()
store.use(piniaPluginPersistedstate)


app.directive('view', {
  mounted: (el, binding) => { // el为绑定的元素，binding为绑定给指令的对象
    function isResize() {
      if (Number(window.innerWidth) <= parseInt(binding.arg)) {
        binding.value(false); // 关键
      } else {
        binding.value(true); // 关键
      }
    }
    isResize()
    window.addEventListener('resize', () => {
      isResize()
    })
  }
})

app.directive('scroll', {
  mounted: (el, binding) => { // el为绑定的元素，binding为绑定给指令的对象
    function isTopOut() {
      if (el.scrollTop === 0) {
        binding.value(true, el.scrollHeight)
      } else {
        binding.value(false, el.scrollHeight)
      }
    }
    el.addEventListener('scroll', antiShake(isTopOut))
  }
})

// 图片懒加载
app.use(lazyPlugin, {
  loading: lazyLoading, // 图片加载时默认图片
  error: lazyError// 图片加载失败时默认图片
})

// 注册 piain
app.use(store)

// 全局注册loading
app.component('Loading', Loading)
// 收藏歌单弹窗
app.component('AddPlaylist', AddPlaylist)
// 分享弹窗
app.component('SharePopup', SharePopup)

// 使用颜色选择器
app.use(V3ColorPicker)
// 注册路由
app.use(router)
app.mount('#app')
